<template>
  <span class="validate-msg">
    <slot></slot>
    <span class="help is-danger" :class="addClass" v-text="msg()"></span>
  </span>
</template>

<script>
import enToCn from '@/config/enToCn'
import { replace, isString } from 'lodash'

const validateEnToCn = {
  props: {
    flag: {
      type: String
    },
    rep: {
      type: [Array, String],
      default () {
        return []
      }
    },
    addClass: {
      type: String,
      default: ''
    }
  },
  computed: {
    showThis () {
      console.log('errs:', this.$parent.errors)
      return this.$parent.errors.has(this.flag)
    }
  },
  methods: {
    msg () {
      let msg = this.$parent.errors.first(this.flag)
      let replaceArr = isString(this.rep)
        ? [this.flag, this.rep]
        : [this.flag, ...this.rep]
      for (let v of replaceArr) {
        msg = replace(msg, v, enToCn[v] || '')
      }
      return msg
    }
  }
}

export default validateEnToCn
</script>

<style scoped lang="scss">
@import "../../assets/scss/base.scss";

.validate-msg{
  display: block;
  font-size: 10px;
  height: 16px;
  color: $c-danger;
}
</style>
